import React from 'react';
import { Layout as AntLayout, Menu } from 'antd';
import { useNavigate, useLocation, Outlet } from 'react-router-dom';
import { 
  FileWordOutlined,
  FilePdfOutlined,
  SwapOutlined,
  ScanOutlined,
  MergeCellsOutlined,
  ScissorOutlined,
  HomeOutlined
} from '@ant-design/icons';
import styles from './Layout.module.css';

const { Header, Content } = AntLayout;

const Layout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const menuItems = [
    {
      key: '/',
      icon: <HomeOutlined />,
      label: '首页'
    },
    {
      key: '/pdf-to-word',
      icon: <FileWordOutlined />,
      label: 'PDF转Word'
    },
    {
      key: '/pdf-to-ppt',
      icon: <SwapOutlined />,
      label: 'PDF转PPT'
    },
    {
      key: '/images-to-pdf',
      icon: <FilePdfOutlined />,
      label: '图片转PDF'
    },
    {
      key: '/ocr',
      icon: <ScanOutlined />,
      label: 'OCR识别'
    },
    {
      key: '/merge-pdf',
      icon: <MergeCellsOutlined />,
      label: '合并PDF'
    },
    {
      key: '/split-pdf',
      icon: <ScissorOutlined />,
      label: '分割PDF'
    }
  ];

  return (
    <AntLayout className={styles.layout}>
      <Header className={styles.header}>
        <div className={styles.headerContent}>
          <div className={styles.logo} onClick={() => navigate('/')}>
            PDF工具箱
          </div>
          <Menu
            theme="light"
            mode="horizontal"
            selectedKeys={[location.pathname]}
            items={menuItems}
            onClick={({ key }) => navigate(key)}
            className={styles.menu}
          />
        </div>
      </Header>
      <Content className={styles.content}>
        <div className={styles.contentWrapper}>
          <Outlet />
        </div>
      </Content>
      <div className={styles.footer}>
        <p>PDF工具箱 © 2024</p>
      </div>
    </AntLayout>
  );
};

export default Layout; 